<template>
    <div style="display: flex;">
<div style="width: 100px;">
    <van-sidebar v-model="active">
  <van-sidebar-item :title="item.cat_name" v-for="item in sidebar"/>
</van-sidebar>

</div>
<div style="flex: 1;">
    <div style="width: 100%;">
        <div v-for="item in sidebar[active]?.children">
            <h3>{{ item.cat_name }}</h3>
            <van-grid :column-num="3">
  <van-grid-item v-for="value in item.children" :key="value" :icon="value.cat_icon" :text="value.cat_name" @click="pushgoods(value.cat_id)"/>
</van-grid>

        </div>
    </div>
</div>
    </div>
</template>

<script setup>
import { ref } from "vue"
import {classifyApi} from '../../request/api'
import {useRouter} from 'vue-router'
const router=new useRouter()
const active=ref(0)
const sidebar=ref([])
classifyApi().then((res)=>{
    sidebar.value=res.data.message
})
const pushgoods=(cid)=>{
    router.push({
        path:'/goods',
        query:{
            cid
        }
    })
}
</script>

<style lang="scss" scoped>

</style>